<template>
  <div class="growthRule-config-container">
    <Tabs v-model:activeKey="currentKey" @change="handleTabChange">
      <TabPane tab="浏览量增长规则设置" key="views">
        <BasicForm @submit="handleSubmit" @register="registerViews" class="form-container">
          <template #max>
            <div class="max">
              <Input placeholder="请输入最大数值" />
              <a-button type="primary" class="btn">添加</a-button>
            </div>
          </template>
        </BasicForm>
      </TabPane>
      <TabPane tab="收藏量增长规则设置" key="favorites">
        <BasicForm @submit="handleSubmit" @register="registerFavorites" class="form-container">
          <template #max>
            <div class="max">
              <Input placeholder="请输入最大数值" />
              <a-button type="primary" class="btn">添加</a-button>
            </div>
          </template>
        </BasicForm>
      </TabPane>
    </Tabs>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { growthRuleSchemas } from './growthRule.data';
  import { Tabs, Input } from 'ant-design-vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  export default defineComponent({
    name: 'EmailConfig',
    components: { BasicForm, Tabs, Input, TabPane: Tabs.TabPane },
    setup() {
      const [registerViews, { setFieldsValue, validate, validateFields, resetFields }] = useForm({
        labelWidth: 200,
        schemas: growthRuleSchemas,
        showResetButton: false,
        submitButtonOptions: {
          text: '保存',
        },
        wrapperCol: {
          span: 14,
        },
      });
      const [
        registerFavorites,
        {
          setFieldsValue: setFavoritesValue,
          validate: favoritesValidate,
          validateFields: favoritesValidateFields,
          resetFields: favoritesResetFields,
        },
      ] = useForm({
        labelWidth: 200,
        schemas: growthRuleSchemas,
        showResetButton: false,
        submitButtonOptions: {
          text: '保存',
        },
        wrapperCol: {
          span: 14,
        },
      });
      const currentKey = ref('views');
      function handleSubmit() {
        switch (currentKey.value) {
          case 'views':
            console.log(currentKey.value);
          case 'favorites':
            console.log(currentKey.value);
        }
      }

      function handleTabChange() {}

      return {
        handleSubmit,
        registerViews,
        registerFavorites,
        currentKey,
        handleTabChange,
      };
    },
  });
</script>
<style scoped lang="less">
  .growthRule-config-container {
    padding: 100px;
    background-color: #fff;
    height: 100%;
    .form-container {
      padding: 20px;
    }
    .max {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .btn {
        margin-left: 10px;
      }
    }
  }
</style>
